.btn {
    display: inline-block;
    height: $input-height;
    padding: 0 $input-height / 2;
    margin: 0;
	box-sizing: border-box;
	line-height: $input-height;
    line-height: ($input-height - 1)\9\0;

    text-align: center;
    text-decoration: none;
	vertical-align: middle;

	font-size: 12px;
	color: #fff;
    border: 1px solid #888;
	border-radius: 3px;

	outline: none !important;
	text-decoration: none !important;
    cursor: default;
	user-select: none;

	> .iconfont {
		vertical-align: -1px;
		font-size: 15px;
	}

	&[disabled],
    &[disabled]:hover {
        color: $color-text-disabled;
        background: lighten($color-text-disabled, 27%);
        border-color: $color-text-disabled;
    }
}

button.btn {line-height: normal;}

// 情景按钮 mixin
@mixin colorButton($color) {
	$amount: 5% !default;

	@if (hue($color) != 0deg) {  // 有色系
		border-color: darken($color, 15%);
		$amount: 10%;
	}

	&:hover {
        background: darken($color, $amount);
	}

    &, &:active {
		background-color: $color;
		background-image: linear-gradient(lighten($color, 5%) 0, darken($color, 3%) 90%, $color);
    }
}

.btn-normal {
	@include colorButton(darken($color-thead, 1%));

    color: $color-font;
}

.btn-primary {
    @include colorButton($color-info);
}

.btn-success {
    @include colorButton($color-success);
}

.btn-danger {
    @include colorButton($color-danger);
}
